<template>
  <div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable mui-slide-in">
    <!--菜单部分-->
    <aside id="offCanvasSide" class="mui-off-canvas-right">
      <div id="offCanvasSideScroll" class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="carHeader">
            <img
              src="http://files.52koala.cn/group72/M00/11/FC/rBUFIF1WR0mAFrf9AABKye7AuKc986.jpg?visitType=ext&categoryId=703&sign=MGNmMjk3Njg4OTE0NWQ4NTk5MDFlOGViYjYwZDhhYzE="
            />
            <span class="carHeader-title">阿尔法罗密欧</span>
          </div>
          <p class="subtitle">阿尔法罗密欧</p>
          <ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 1</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 2</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 3</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 4</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 5</a>
            </li>
            <li class="mui-table-view-cell">
              <a class="mui-navigate-right">Item 6</a>
            </li>
          </ul>
        </div>
      </div>
    </aside>
    <div class="mui-inner-wrap">
      <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="mui-content-padded">
            <p style="padding: 5px 20px;margin-bottom: 5px;">
              <button
                type="button"
                class="mui-btn mui-btn-primary mui-btn-block"
                style="padding: 5px;"
                @click="offCanvasShow"
              >显示侧滑菜单</button>
            </p>
            <p style="padding: 5px 20px;margin-bottom: 5px;">
              <button
                type="button"
                class="mui-btn mui-btn-primary mui-btn-block"
                style="padding: 5px;"
                @click="offCanvasShow"
              >显示侧滑菜单</button>
            </p>
            <p style="padding: 5px 20px;margin-bottom: 5px;">
              <button
                type="button"
                class="mui-btn mui-btn-primary mui-btn-block"
                style="padding: 5px;"
                @click="offCanvasShow"
              >显示侧滑菜单</button>
            </p>
          </div>

          <!-- <form class="mui-input-group" style="margin-bottom: 15px;">
            <div class="mui-input-row mui-radio">
              <label>主界面移动、菜单不动</label>
              <input name="style" type="radio" checked value="main-move" />
            </div>
            <div class="mui-input-row mui-radio">
              <label>主界面不动、菜单移动</label>
              <input name="style" type="radio" value="menu-move" />
            </div>
            <div class="mui-input-row mui-radio mui-hidden" id="move-togger">
              <label>整体移动</label>
              <input name="style" type="radio" value="all-move" />
            </div>
            <div class="mui-input-row mui-radio">
              <label>缩放式侧滑（类手机QQ）</label>
              <input name="style" type="radio" value="main-move-scalable" />
            </div>
          </form>-->
        </div>
      </div>
      <!-- off-canvas backdrop -->
      <div class="mui-off-canvas-backdrop"></div>
    </div>
  </div>
</template>

<script>
import mui from "../../lib/mui/js/mui.min.js";

export default {
  data() {
    return {};
  },
  mounted() {
    mui.init({
      swipeBack: false
    });
    //侧滑容器父节点
    var offCanvasWrapper = mui("#offCanvasWrapper");
    //主界面容器
    var offCanvasInner = offCanvasWrapper[0].querySelector(".mui-inner-wrap");
    //菜单容器
    var offCanvasSide = document.getElementById("offCanvasSide");
    //Android暂不支持整体移动动画
    // if (!mui.os.android) {
    //   document.getElementById("move-togger").classList.remove("mui-hidden");
    //   var spans = document.querySelectorAll(".android-only");
    //   for (var i = 0, len = spans.length; i < len; i++) {
    //     spans[i].style.display = "none";
    //   }
    // }
    //移动效果是否为整体移动
    var moveTogether = false;
    //侧滑容器的class列表，增加.mui-slide-in即可实现菜单移动、主界面不动的效果；
    //var classList = offCanvasWrapper[0].classList;
    //变换侧滑动画移动效果；
    // mui(".mui-input-group").on("change", "input", function() {
    //   if (this.checked) {
    //     offCanvasSide.classList.remove("mui-transitioning");
    //     offCanvasSide.setAttribute("style", "");
    //     classList.remove("mui-slide-in");
    //     classList.remove("mui-scalable");
    //     switch (this.value) {
    //       case "main-move":
    //         if (moveTogether) {
    //           //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
    //           offCanvasWrapper[0].insertBefore(
    //             offCanvasSide,
    //             offCanvasWrapper[0].firstElementChild
    //           );
    //           moveTogether = false;
    //         }
    //         break;
    //       case "main-move-scalable":
    //         if (moveTogether) {
    //           //仅主内容滑动时，侧滑菜单在off-canvas-wrap内，和主界面并列
    //           offCanvasWrapper[0].insertBefore(
    //             offCanvasSide,
    //             offCanvasWrapper[0].firstElementChild
    //           );
    //         }
    //         classList.add("mui-scalable");
    //         break;
    //       case "menu-move":
    //         classList.add("mui-slide-in");
    //         break;
    //       case "all-move":
    //         moveTogether = true;
    //         //整体滑动时，侧滑菜单在inner-wrap内
    //         offCanvasInner.insertBefore(
    //           offCanvasSide,
    //           offCanvasInner.firstElementChild
    //         );
    //         break;
    //     }
    //     offCanvasWrapper.offCanvas().refresh();
    //   }
    // });
    // document
    //   .getElementById("offCanvasShow")
    //   .addEventListener("tap", function() {
    //     offCanvasWrapper.offCanvas("show");
    //   });
    // document
    //   .getElementById("offCanvasHide")
    //   .addEventListener("tap", function() {
    //     offCanvasWrapper.offCanvas("close");
    //   });
    //阻止手动显示侧滑菜单
    document
      .getElementsByClassName("mui-inner-wrap")[0]
      .addEventListener("drag", function(event) {
        event.stopPropagation();
      });
    //阻止手动关闭侧滑菜单
    document
      .getElementsByClassName("mui-off-canvas-right")[0]
      .addEventListener("drag", function(event) {
        event.stopPropagation();
      });
    //主界面和侧滑菜单界面均支持区域滚动；
    mui("#offCanvasSideScroll").scroll();
    mui("#offCanvasContentScroll").scroll();
    //实现ios平台的侧滑关闭页面；
    if (mui.os.plus && mui.os.ios) {
      offCanvasWrapper[0].addEventListener("shown", function(e) {
        //菜单显示完成事件
        plus.webview.currentWebview().setStyle({
          popGesture: "none"
        });
      });
      offCanvasWrapper[0].addEventListener("hidden", function(e) {
        //菜单关闭完成事件
        plus.webview.currentWebview().setStyle({
          popGesture: "close"
        });
      });
    }
  },
  methods: {
    offCanvasShow() {
      var offCanvasWrapper = mui("#offCanvasWrapper");
      offCanvasWrapper.offCanvas("show");
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  touch-action: pan-y;
  // padding: 0;
  // margin: 0;
}
#offCanvasWrapper {
  height: 622px;
}
.mui-scroll-wrapper {
  background-color: #fff;
  .mui-scroll {
    .carHeader {
      height: 59px;
      line-height: 59px;
      margin-left: 16px;
      font-size: 0;
      .carHeader-title {
        font-size: 14px;
        vertical-align: middle;
      }
      img {
        width: 27px;
        vertical-align: middle;
        margin-right: 6px;
      }
    }
    .subtitle {
      height: 28px;
      line-height: 28px;
      background-color: #f0f0f0;
      font-size: 13px;
      padding-left: 16px;
      color: #333333;
      margin: 0;
    }
    .mui-table-view-inverted {
      background-color: #fff;
    }
    .mui-table-view-inverted .mui-table-view-cell:after {
      background-color: #d8d8d8;
    }
    .mui-navigate-right:after,
    .mui-push-left:after,
    .mui-push-right:after {
      display: none;
    }
    .mui-navigate-right {
      color: #333333;
    }
    .mui-table-view-cell > a:not(.mui-btn).mui-active {
      background-color: #fff;
    }
    .mui-table-view-inverted:after {
      background-color: #d8d8d8;
    }
    .mui-table-view-inverted:before {
      height: 0;
    }
  }
}
</style>